<template>
  <div class="feedback-container">
    <!-- 添加导航组件 -->
    <help-navigation />
    
    <n-card class="feedback-card">
      <template #header>
        <div class="card-header">
          <h1>反馈与支持</h1>
        </div>
      </template>
      
      <n-tabs type="line" animated>
        <!-- 问题反馈 -->
        <n-tab-pane name="report" tab="问题反馈">
          <div class="tab-content">
            <n-alert type="info" :show-icon="true" style="margin-bottom: 20px;">
              <template #icon>
                <n-icon><InformationCircle /></n-icon>
              </template>
              <template #header>
                提交反馈
              </template>
              您的反馈对我们非常重要！请详细描述您遇到的问题或建议，我们会尽快处理。
            </n-alert>
            
            <n-form
              ref="formRef"
              :model="feedbackForm"
              :rules="rules"
              label-placement="left"
              label-width="100"
              require-mark-placement="right-hanging"
            >
              <n-form-item label="反馈类型" path="type">
                <n-select
                  v-model:value="feedbackForm.type"
                  :options="feedbackTypes"
                  placeholder="请选择反馈类型"
                />
              </n-form-item>
              
              <n-form-item label="标题" path="title">
                <n-input
                  v-model:value="feedbackForm.title"
                  placeholder="请简要描述问题"
                />
              </n-form-item>
              
              <n-form-item label="详细描述" path="description">
                <n-input
                  v-model:value="feedbackForm.description"
                  type="textarea"
                  placeholder="请详细描述您遇到的问题或建议..."
                  :autosize="{ minRows: 5, maxRows: 10 }"
                />
              </n-form-item>
              
              <n-form-item label="严重程度" path="severity">
                <n-rate v-model:value="feedbackForm.severity" :count="5" />
              </n-form-item>
              
              <n-form-item label="复现步骤" path="steps">
                <n-dynamic-input
                  v-model:value="feedbackForm.steps"
                  preset="pair"
                  :key-placeholder="'步骤'"
                  :value-placeholder="'具体操作'"
                />
              </n-form-item>
              
              <n-form-item label="附件" path="attachments">
                <n-upload
                  action="#"
                  :default-upload="false"
                  :max="3"
                  @change="handleUploadChange"
                >
                  <n-button>
                    <template #icon><n-icon><CloudUpload /></n-icon></template>
                    添加截图或日志
                  </n-button>
                </n-upload>
              </n-form-item>
              
              <n-form-item label="联系方式" path="contact">
                <n-input
                  v-model:value="feedbackForm.contact"
                  placeholder="您的邮箱或其他联系方式（选填）"
                />
              </n-form-item>
              
              <n-form-item>
                <n-space justify="end">
                  <n-button @click="resetForm">重置</n-button>
                  <n-button type="primary" @click="submitFeedback">提交反馈</n-button>
                </n-space>
              </n-form-item>
            </n-form>
          </div>
        </n-tab-pane>
        
        <!-- 反馈历史 -->
        <n-tab-pane name="history" tab="反馈历史">
          <div class="tab-content">
            <n-empty v-if="feedbackHistory.length === 0" description="暂无反馈记录">
              <template #extra>
                <n-button @click="activeTab = 'report'">去提交反馈</n-button>
              </template>
            </n-empty>
            
            <div v-else class="feedback-history-list">
              <n-collapse>
                <n-collapse-item
                  v-for="item in feedbackHistory"
                  :key="item.id"
                  :title="item.title"
                  :name="item.id"
                >
                  <div class="feedback-item">
                    <div class="feedback-meta">
                      <div class="feedback-type">
                        <n-tag :type="getTagType(item.type)">{{ item.type }}</n-tag>
                      </div>
                      <div class="feedback-date">{{ formatDate(item.date) }}</div>
                    </div>
                    
                    <div class="feedback-description">
                      {{ item.description }}
                    </div>
                    
                    <div class="feedback-status">
                      <span class="label">状态：</span>
                      <n-tag :type="getStatusType(item.status)">{{ item.status }}</n-tag>
                    </div>
                    
                    <div v-if="item.reply" class="feedback-reply">
                      <div class="reply-header">官方回复：</div>
                      <div class="reply-content">{{ item.reply.content }}</div>
                      <div class="reply-date">{{ formatDate(item.reply.date) }}</div>
                    </div>
                  </div>
                </n-collapse-item>
              </n-collapse>
            </div>
          </div>
        </n-tab-pane>
        
        <!-- 联系支持 -->
        <n-tab-pane name="contact" tab="联系支持">
          <div class="tab-content">
            <div class="contact-info">
              <div class="contact-item">
                <div class="contact-icon">
                  <n-icon size="24"><Mail /></n-icon>
                </div>
                <div class="contact-details">
                  <h3>电子邮件</h3>
                  <p>support@shadowflash.com</p>
                  <p class="description">工作日 9:00-18:00，通常在24小时内回复</p>
                </div>
              </div>
              
              <div class="contact-item">
                <div class="contact-icon">
                  <n-icon size="24"><ChatbubbleEllipses /></n-icon>
                </div>
                <div class="contact-details">
                  <h3>在线客服</h3>
                  <p>工作日 9:00-22:00，节假日 10:00-18:00</p>
                  <n-button @click="startChat">开始对话</n-button>
                </div>
              </div>
              
              <div class="contact-item">
                <div class="contact-icon">
                  <n-icon size="24"><People /></n-icon>
                </div>
                <div class="contact-details">
                  <h3>社区论坛</h3>
                  <p>加入我们的用户社区，获取帮助和分享经验</p>
                  <n-button @click="goToCommunity">访问社区</n-button>
                </div>
              </div>
              
              <div class="contact-item">
                <div class="contact-icon">
                  <n-icon size="24"><LogoWechat /></n-icon>
                </div>
                <div class="contact-details">
                  <h3>官方微信</h3>
                  <p>扫描下方二维码关注官方公众号</p>
                  <div class="qrcode">
                    <img src="https://picsum.photos/id/1/150/150" alt="微信二维码">
                  </div>
                </div>
              </div>
            </div>
            
            <div class="faq-section">
              <h3>常见问题</h3>
              <n-collapse>
                <n-collapse-item title="如何获取软件授权？" name="license">
                  您可以通过官方网站或授权经销商购买软件授权。购买后，您将收到一个授权码，在软件的"设置 > 授权管理"中输入即可激活。
                </n-collapse-item>
                <n-collapse-item title="软件无法启动怎么办？" name="startup">
                  请检查您的系统是否满足最低配置要求，并确保已安装最新版本的软件。如果问题仍然存在，请尝试重新安装软件或联系我们的技术支持。
                </n-collapse-item>
                <n-collapse-item title="如何恢复误删除的项目？" name="recovery">
                  软件会自动保存项目的备份版本。您可以在"文件 > 恢复项目"中查看可恢复的项目列表。如果您启用了云同步功能，也可以从云端恢复项目。
                </n-collapse-item>
                <n-collapse-item title="如何更新到最新版本？" name="update">
                  软件会自动检查更新，当有新版本可用时会通知您。您也可以在"帮助 > 检查更新"中手动检查更新。
                </n-collapse-item>
              </n-collapse>
            </div>
          </div>
        </n-tab-pane>
        
        <!-- 系统状态 -->
        <n-tab-pane name="status" tab="系统状态">
          <div class="tab-content">
            <div class="system-status">
              <n-card title="系统运行状态" class="status-card">
                <n-space vertical>
                  <div class="status-item">
                    <span class="status-label">API服务器</span>
                    <n-tag type="success">正常</n-tag>
                  </div>
                  <div class="status-item">
                    <span class="status-label">云存储服务</span>
                    <n-tag type="success">正常</n-tag>
                  </div>
                  <div class="status-item">
                    <span class="status-label">AI生成服务</span>
                    <n-tag type="warning">部分延迟</n-tag>
                  </div>
                  <div class="status-item">
                    <span class="status-label">用户认证服务</span>
                    <n-tag type="success">正常</n-tag>
                  </div>
                  <div class="status-item">
                    <span class="status-label">市场服务</span>
                    <n-tag type="success">正常</n-tag>
                  </div>
                </n-space>
                <template #footer>
                  <div class="status-footer">
                    最后更新时间: {{ formatDateTime(new Date()) }}
                    <n-button text @click="refreshStatus">
                      <template #icon><n-icon><Refresh /></n-icon></template>
                      刷新
                    </n-button>
                  </div>
                </template>
              </n-card>
              
              <n-card title="计划维护" class="maintenance-card">
                <n-empty v-if="maintenanceEvents.length === 0" description="暂无计划维护">
                </n-empty>
                <n-timeline v-else>
                  <n-timeline-item
                    v-for="event in maintenanceEvents"
                    :key="event.id"
                    :type="event.type"
                    :title="event.title"
                    :time="formatDate(event.time)"
                  >
                    {{ event.description }}
                  </n-timeline-item>
                </n-timeline>
              </n-card>
            </div>
            
            <div class="diagnostics-section">
              <h3>诊断信息</h3>
              <n-descriptions bordered>
                <n-descriptions-item label="软件版本">1.2.5</n-descriptions-item>
                <n-descriptions-item label="操作系统">Windows 10</n-descriptions-item>
                <n-descriptions-item label="内存使用">1.2GB / 8GB</n-descriptions-item>
                <n-descriptions-item label="存储空间">45.8GB 可用</n-descriptions-item>
                <n-descriptions-item label="网络状态">已连接</n-descriptions-item>
                <n-descriptions-item label="最后更新">2023-05-15</n-descriptions-item>
              </n-descriptions>
              
              <div class="diagnostics-actions">
                <n-button @click="runDiagnostics">
                  <template #icon><n-icon><MedicalOutline /></n-icon></template>
                  运行诊断
                </n-button>
                <n-button @click="exportLogs">
                  <template #icon><n-icon><DocumentText /></n-icon></template>
                  导出日志
                </n-button>
              </div>
            </div>
          </div>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage, FormInst } from 'naive-ui'
import {
  NCard,
  NTabs,
  NTabPane,
  NForm,
  NFormItem,
  NInput,
  NSelect,
  NRate,
  NButton,
  NSpace,
  NAlert,
  NIcon,
  NUpload,
  NDynamicInput,
  NEmpty,
  NCollapse,
  NCollapseItem,
  NTag,
  NTimeline,
  NTimelineItem,
  NDescriptions,
  NDescriptionsItem
} from 'naive-ui'
import {
  InformationCircle,
  CloudUpload,
  Mail,
  ChatbubbleEllipses,
  People,
  LogoWechat,
  Refresh,
  MedicalOutline,
  DocumentText
} from '@vicons/ionicons5'
import HelpNavigation from '../../components/help/HelpNavigation.vue'

const router = useRouter()
const message = useMessage()

// 当前活动标签
const activeTab = ref('report')
const formRef = ref<FormInst | null>(null)

// 反馈表单
const feedbackForm = reactive({
  type: '',
  title: '',
  description: '',
  severity: 3,
  steps: [],
  attachments: [],
  contact: ''
})

// 反馈类型选项
const feedbackTypes = [
  { label: 'Bug报告', value: 'bug' },
  { label: '功能建议', value: 'feature' },
  { label: '性能问题', value: 'performance' },
  { label: '界面问题', value: 'ui' },
  { label: '其他', value: 'other' }
]

// 表单验证规则
const rules = {
  type: {
    required: true,
    message: '请选择反馈类型',
    trigger: 'blur'
  },
  title: {
    required: true,
    message: '请输入标题',
    trigger: 'blur'
  },
  description: {
    required: true,
    message: '请输入详细描述',
    trigger: 'blur'
  }
}

// 反馈历史
const feedbackHistory = ref([
  {
    id: '1',
    title: '导出视频时软件崩溃',
    type: 'Bug报告',
    description: '当我尝试导出超过5分钟的视频时，软件总是在进度达到80%左右时崩溃。',
    date: new Date('2023-04-10'),
    status: '已解决',
    reply: {
      content: '感谢您的反馈！这个问题已在最新版本中修复，请更新到v1.2.5版本。',
      date: new Date('2023-04-12')
    }
  },
  {
    id: '2',
    title: '希望增加更多皮影角色模板',
    type: '功能建议',
    description: '建议增加更多传统故事角色的皮影模板，如《西游记》《三国演义》等经典角色。',
    date: new Date('2023-03-25'),
    status: '处理中',
    reply: null
  },
  {
    id: '3',
    title: '骨骼系统绑定不正确',
    type: 'Bug报告',
    description: '使用骨骼系统绑定角色部件时，有时会出现部件位置错乱的情况。',
    date: new Date('2023-03-15'),
    status: '待处理',
    reply: null
  }
])

// 维护事件
interface MaintenanceEvent {
  id: string;
  title: string;
  description: string;
  time: Date;
  type: 'default' | 'error' | 'success' | 'warning' | 'info' | undefined;
}

// 维护事件
const maintenanceEvents = ref<MaintenanceEvent[]>([
  {
    id: '1',
    title: 'AI服务器升级',
    description: 'AI生成服务将进行升级，期间可能出现服务不稳定。',
    time: new Date('2023-05-20'),
    type: 'warning'
  }
])

// 处理上传变化
const handleUploadChange = (options: any) => {
  console.log('上传文件:', options)
}

// 提交反馈
const submitFeedback = () => {
  message.success('反馈已提交，感谢您的支持！')
  resetForm()
}

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.restoreValidation()
  }
  feedbackForm.type = ''
  feedbackForm.title = ''
  feedbackForm.description = ''
  feedbackForm.severity = 3
  feedbackForm.steps = []
  feedbackForm.attachments = []
  feedbackForm.contact = ''
}

// 开始在线客服对话
const startChat = () => {
  message.info('正在连接客服系统...')
}

// 前往社区
const goToCommunity = () => {
  router.push('/community')
}

// 运行诊断
const runDiagnostics = () => {
  message.info('正在运行系统诊断...')
  setTimeout(() => {
    message.success('诊断完成，未发现异常')
  }, 2000)
}

// 导出日志
const exportLogs = () => {
  message.success('日志已导出到桌面')
}

// 刷新状态
const refreshStatus = () => {
  message.info('正在刷新系统状态...')
  setTimeout(() => {
    message.success('系统状态已更新')
  }, 1000)
}

// 获取标签类型
const getTagType = (type: string): 'default' | 'error' | 'success' | 'warning' | 'info' => {
  switch (type) {
    case 'Bug报告': return 'error'
    case '功能建议': return 'info'
    case '性能问题': return 'warning'
    default: return 'default'
  }
}

// 获取状态标签类型
const getStatusType = (status: string): 'default' | 'error' | 'success' | 'warning' | 'info' | undefined => {
  switch (status) {
    case '已解决': return 'success'
    case '处理中': return 'info'
    case '待处理': return 'warning'
    case '已拒绝': return 'error'
    default: return 'default'
  }
}

// 格式化日期
const formatDate = (date: Date) => {
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
}

// 格式化日期时间
const formatDateTime = (date: Date) => {
  return `${formatDate(date)} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}
</script>

<style lang="scss" scoped>
.feedback-container {
  padding: 20px;
  height: 100%;
  
  .feedback-card {
    height: 100%;
    
    .card-header {
      h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 500;
      }
    }
  }
  
  .tab-content {
    padding: 16px 0;
  }
  
  .feedback-history-list {
    .feedback-item {
      padding: 8px 0;
      
      .feedback-meta {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
      }
      
      .feedback-description {
        margin-bottom: 16px;
        line-height: 1.5;
      }
      
      .feedback-status {
        margin-bottom: 16px;
        
        .label {
          margin-right: 8px;
          color: var(--text-color-secondary);
        }
      }
      
      .feedback-reply {
        background-color: rgba(0, 0, 0, 0.02);
        border-left: 3px solid var(--primary-color);
        padding: 12px;
        margin-top: 16px;
        
        .reply-header {
          font-weight: 500;
          margin-bottom: 8px;
        }
        
        .reply-content {
          margin-bottom: 8px;
          line-height: 1.5;
        }
        
        .reply-date {
          text-align: right;
          font-size: 12px;
          color: var(--text-color-secondary);
        }
      }
    }
  }
  
  .contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
    
    .contact-item {
      display: flex;
      gap: 16px;
      
      .contact-icon {
        color: var(--primary-color);
      }
      
      .contact-details {
        h3 {
          margin: 0 0 8px 0;
          font-size: 16px;
          font-weight: 500;
        }
        
        p {
          margin: 0 0 12px 0;
          color: var(--text-color-secondary);
        }
        
        .description {
          font-size: 12px;
        }
        
        .qrcode {
          margin-top: 12px;
          
          img {
            max-width: 150px;
            border: 1px solid #eee;
          }
        }
      }
    }
  }
  
  .faq-section {
    margin-top: 32px;
    
    h3 {
      margin: 0 0 16px 0;
      font-size: 18px;
      font-weight: 500;
    }
  }
  
  .system-status {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
    
    .status-card {
      .status-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
      }
      
      .status-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: var(--text-color-secondary);
      }
    }
  }
  
  .diagnostics-section {
    h3 {
      margin: 0 0 16px 0;
      font-size: 18px;
      font-weight: 500;
    }
    
    .diagnostics-actions {
      display: flex;
      gap: 16px;
      margin-top: 24px;
    }
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .feedback-container {
    padding: 10px;
    
    .system-status {
      grid-template-columns: 1fr;
    }
  }
}
</style> 